map:vector markers-image

Row

map

map:vector markers-audio

Row

map

map:vector-read-csv

Row

map

Table

  id      lat     long     treatment biomass_kg main_specie
1  1 41.75776 2.321900     triturado        1.3           A
2  2 41.75737 2.321770     triturado        1.5           B
3  3 41.75729 2.321415  no triturado        2.8           C
4  4 41.75746 2.321126  no triturado        3.6           D
                                                            src_image
1  '<img src=".//images/DJI_0049.JPG" height="150px" width="150px"/>'
2 '<img src=".//images/DJI_0014.JPG" height="150px" width="150px"/> '
3 '<img src=".//images/DJI_0040.JPG" height="150px" width="150px"/> '
4 '<img src=".//images/DJI_0001.JPG" height="150px" width="150px"/> '
                                                                                             src_audio
1 '<audio controls autoplay> <source src=".//audios/20120513_063742.mp3" type="audio/mpeg"> </audio>"'
2  '<audio controls autoplay> <source src=".//audios/20120513_063943.mp3" type="audio/mpeg"> </audio>'
3  '<audio controls autoplay> <source src=".//audios/20120513_065142.mp3" type="audio/mpeg"> </audio>'
4  '<audio controls autoplay> <source src=".//audios/20120513_065422.mp3" type="audio/mpeg"> </audio>'
                                                                                                                                                        src_image_audio
1 '<img src=".//images/DJI_0049.JPG" height="150px" width="150px"/> <audio controls autoplay> <source src=".//audios/20120513_063742.mp3" type="audio/mpeg"> </audio>"'
2  '<img src=".//images/DJI_0014.JPG" height="150px" width="150px"/> <audio controls autoplay> <source src=".//audios/20120513_063943.mp3" type="audio/mpeg"> </audio>'
3  '<img src=".//images/DJI_0040.JPG" height="150px" width="150px"/> <audio controls autoplay> <source src=".//audios/20120513_065142.mp3" type="audio/mpeg"> </audio>'
4  '<img src=".//images/DJI_0001.JPG" height="150px" width="150px"/> <audio controls autoplay> <source src=".//audios/20120513_065422.mp3" type="audio/mpeg"> </audio>'
         label
1 DJI_0049.JPG
2 DJI_0036.JPG
3 DJI_0014.JPG
4 DJI_0040.JPG
---
title: "Map Examples using Leaflet 20230606"
author: "Inti Luna"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    social: menu
    source_code: embed
---

```{r setup, include=FALSE}
library(ggplot2)
library(plotly)
library(plyr)
library(flexdashboard)
library(leaflet)
library(leaflet.providers)
library(tidyverse)
library(htmlwidgets)
library(DT)
library(raster)
library(crosstalk)


```


map:vector markers-image
=======================================================================

Row
-----------------------------------------------------------------------

### map 

```{r}
m <- leaflet() %>%
  addTiles() %>%  # Add default OpenStreetMap map tiles
  addMarkers(lng=2.32081655555556, lat=41.7576773611111,label="DJI_0049.JPG", popup='<img src=".//images/DJI_0049.JPG" height="150px" width="150px"/>')%>%
  addMarkers(lng=2.31952280555556, lat=41.7567564166667,label="DJI_0036.JPG", popup='<img src=".//images/DJI_0036.JPG" height="150px" width="150px"/>')
  
m  # Print the map
```

map:vector markers-audio
=======================================================================

Row
-----------------------------------------------------------------------

### map 

```{r}
# m2 <- leaflet() %>%
#   addTiles() %>%  # Add default OpenStreetMap map tiles
#   addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
# m  # Print the map

map <- leaflet() %>%
    # Base groups
    addTiles(group = "OSM (default)") %>%
    addProviderTiles(providers$Stamen.Toner, group = "Toner") %>%
    addProviderTiles(providers$Stamen.TonerLite, group = "Toner Lite") %>%
    addProviderTiles(providers$Esri.WorldImagery, group = "Satview") %>%
    # Overlay groups
    addMarkers(lng=2.32081655555556, lat=41.7576773611111,label="DJI_0049.JPG", popup='<img src=".//images/DJI_0049.JPG" height="150px" width="150px"/> <audio controls autoplay> <source src=".//audios/20120513_063742.mp3" type="audio/mpeg"> </audio>"')%>%
    addMarkers(lng=2.31952280555556, lat=41.7567564166667,label="DJI_0036.JPG", popup='<img src=".//images/DJI_0036.JPG" height="150px" width="150px"/> <audio controls autoplay> <source src=".//audios/20120513_063915.mp3" type="audio/mpeg"> </audio>')%>%
    
    # Layers control
    addLayersControl(
      baseGroups = c("OSM (default)", "Toner", "Toner Lite","Satview"),
      overlayGroups = c("poi"),
      options = layersControlOptions(collapsed = FALSE)
    )
  # map %>% hideGroup("rios temporales")%>% 
  #   hideGroup("ca") %>%
  #   hideGroup("aoi") %>%
  #   hideGroup("patrl")
map %>%
  addMeasure(
    position = "bottomleft",
    primaryLengthUnit = "meters",
    primaryAreaUnit = "sqmeters",
    activeColor = "#3D535D",
    completedColor = "#7D4479")%>%

  addMiniMap(
    tiles = providers$osm,
    toggleDisplay = TRUE)
```

map:vector-read-csv
=======================================================================

Row
-----------------------------------------------------------------------

### map 

```{r}

#read df
pladf<-read.csv("df_spatial.csv",header = TRUE)
pladf.shared <- SharedData$new(pladf)


map2 <- leaflet() %>%
    # Base groups
    addTiles(group = "OSM (default)") %>%
    addProviderTiles(providers$Stamen.Toner, group = "Toner") %>%
    addProviderTiles(providers$Stamen.TonerLite, group = "Toner Lite") %>%
    addProviderTiles(providers$Esri.WorldImagery, group = "Satview") %>%
  
    
    
    # Overlay groups
    addMarkers(lng=pladf$long, lat=pladf$lat, label = pladf$label, popup=pladf$src_image_audio, group= "poi") %>%
    # addMarkers(lng=pladf.shared$long, lat=pladf.shared$lat, label = pladf.shared$id, group= "poi") %>%
    # addPolygons(data=admin, weight = 3, fillColor = 'green', color = 'green',fillOpacity = 0.3, group = "admin") %>%
    # addPolygons(data=ca, weight = 3, fillColor = 'white', color = 'white',fillOpacity = 0.3,group = "ca") %>%
    # addPolygons(data=ba,label = ~name, weight = 3, fillColor = 'yellow', color = 'red',fillOpacity = 0.3,group = "ba") %>%
    # addPolygons(data=aoi, weight = 3, fillColor = 'brown', color = 'brown',fillOpacity = 0.3,group = "aoi") %>%
    # addPolygons(data=patrl, label = ~name, weight = 3, fillColor = 'yellow', color = 'yellow',fillOpacity = 0.3,group = "patrl")  %>%
    # addPolygons(data=sectores,label = ~nombre, weight = 3, fillColor = 'red', color = 'red',fillOpacity = 0.3,group = "sectores")  %>%
    # addPolylines(data=rios_p,label = ~NOMBRE, weight = 3, fillColor = 'blue', color = 'blue',fillOpacity = 0.3,group = "rios permanentes") %>%
    # addPolylines(data=rios_t, weight = 2, fillColor = 'blue', color = 'blue',fillOpacity = 0.1,group = "rios temporales")  %>%
    
    # Layers control
    addLayersControl(
      baseGroups = c("OSM (default)", "Toner", "Toner Lite","Satview"),
      overlayGroups = c("poi"),
      options = layersControlOptions(collapsed = FALSE)
    )
  # map %>% hideGroup("rios temporales")%>% 
  #   hideGroup("ca") %>%
  #   hideGroup("aoi") %>%
  #   hideGroup("patrl")
map2 %>%
  addMeasure(
    position = "bottomleft",
    primaryLengthUnit = "meters",
    primaryAreaUnit = "sqmeters",
    activeColor = "#3D535D",
    completedColor = "#7D4479")%>%

  addMiniMap(
    tiles = providers$osm,
    toggleDisplay = TRUE)
```

### Table

```{r}

#read df
# pladf<-read.csv("df_spatial.csv",header = TRUE)
pladf
```


```{r eval=FALSE}
### **Map Filters:**
#https://www.thetidytrekker.com/post/dull-dashboards
#<center>

  filter_checkbox(
    id = "main_specie",
    label = "Specie Type",
    sharedData = pladf.shared,
    group = ~`main_specie`,
    inline = TRUE
  )

```